<template>
  <div class="index" style="background: rgb(246, 248, 251);">
    <van-nav-bar title="订单" left-arrow @click-left="onClickLeft" />
    <div style=" padding:0.3rem;">
      <div
        style="border-radius: 0.3rem; overflow: hidden; margin-bottom: 0.3rem; background: #fff;"
        v-for="item in list"
        :key="item.id"
      >
        <div
          class="flexbc"
          style="height: 0.8rem; padding: 0 0.3rem; background: rgb(228, 237, 255); color: rgb(0, 90, 255); font-size: 0.24rem;"
        >
          <div class="flexc">
            订单号：{{ item.order_no }}
            <div style="margin-left: 0.2rem;" @click="copy(item.order_no)">
              <img
                src="../../../static/img/fuzhiing.png"
                style="width: 0.28rem;"
              />
            </div>
          </div>
          <div>{{ item.status_name }}</div>
        </div>
        <div style="padding: 0.3rem;">
          <div
            style="font-weight: bold; font-size: 0.34rem; margin-bottom: 0.3rem;"
          >
            {{ item.goods_name }}
          </div>
          <div
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>收件人</div>
            <div
              style=" font-size: 0.3rem; font-weight: bold;  max-width: 4rem;"
            >
              {{ item.address_name }}
            </div>
          </div>
          <div
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>生产号码</div>
            <div style="color: rgb(120, 125, 133); max-width: 4rem;">
              {{ item.plan_mobile_produce }}
            </div>
          </div>
          <div v-if="item.iccid"
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>ICCID</div>
            <div style="color: rgb(120, 125, 133); max-width: 4rem;">
              {{ item.iccid }}
            </div>
          </div>
          <div
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>快递公司</div>
            <div style="color: rgb(120, 125, 133); max-width: 4rem;">
              {{ item.tracking_company_id }}
            </div>
          </div>
          <div
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>快递单号</div>
            <div style="color: rgb(120, 125, 133); max-width: 4rem;">
              {{ item.tracking_number }}
            </div>
          </div>
          <div
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>交易状态</div>
            <div style="color: rgb(120, 125, 133); max-width: 4rem;">
              <div :style="{color:item.pay_name == '拒绝退款'?'#f00':'rgb(120, 125, 133)'}"><span v-if="item.pay_name == '拒绝退款'">已</span>{{ item.pay_name }}</div>
            </div>
          </div>

          <div
            class="flexbc" v-if="item.pay_name == '拒绝退款'"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div>拒绝原因：{{ item.refuse_remarks }}</div>
            <div style="color: rgb(120, 125, 133);">
              <div style="color: #287AFD;" @click="tkuan(item)" >再次申请</div>
            </div>
          </div>
          <div
            class="flexbc"
            style="margin-bottom: 0.3rem; font-size: 0.24rem; color: rgb(64, 66, 71);"
          >
            <div v-if="item.status_name == '生产失败'">失败原因</div>
            <div
              style="color: rgb(120, 125, 133); max-width: 4rem;"
              v-if="item.status_name == '生产失败'"
            >
              {{ item.reason }}
            </div>
          </div>
          <div
            v-if="item.pay_status == 1 && item.refund == 1"
            style="display: flex;justify-content: end;"
          >
            <div
              @click="tkuan(item)"
              style="color: #287AFD;border: 1px solid #287AFD; border-radius: 0.4rem;padding: 0.1rem 0.3rem;font-size: 0.24rem;text-align: center;"
            >
              申请退款
            </div>
          </div>
          <!-- <div v-if="item.pay_status==5||item.pay_status==6||item.pay_status==8" style="display: flex;justify-content: end;">
              <div  style="font-size: 0.24rem;text-align: center;">{{ item.pay_name }}</div>
            </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var h = document.documentElement.clientWidth / 7.5 + "px";
document.documentElement.style.fontSize = h;
export default {
  name: "query",
  data() {
    return {
      all: {
        mobile: "",
        id_card_num: ""
      },
      list: [],
      all2: {}
    };
  },
  created() {
    this.all.mobile = this.$route.query.mobile;
    this.all.id_card_num = this.$route.query.id_card_num;

    this.getlist();
  },
  mounted() {
    document.title = "订单查询";
  },
  methods: {
    getlist() {
      axios.get("/api/search/order", { params: this.all }).then(response => {
        if (response.data.msg.code == 0) {
          this.list = response.data.data;
        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },
    changes: function(v) {
      // console.log(this.$refs.m1)
      // if(v == 1){
      //   this.$refs.m2.focus()
      // }
      // if(v == 2){
      //   this.$refs.m3.focus()
      // }
      // if(v == 3){
      //   this.$refs.m4.focus()
      // }
    },
    xiadan: function() {
      this.all.id_card_num =
        this.all2.mobile1 +
        this.all2.mobile2 +
        this.all2.mobile3 +
        this.all2.mobile4;

      axios.post("/api/search/order", this.all).then(response => {
        if (response.data.msg.code == 0) {
        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },
    onClickLeft: function() {
      this.$router.back(-1);
    },
    //申请退款
    tkuan(item) {
      vant.Dialog.confirm({
        title: "提示",
        message: "是否确认申请退款"
      })
        .then(() => {
          // on confirm
          axios
            .post("/api/search/order/refund", {
              mobile: this.$route.query.mobile,
              order_no: item.order_no
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                vant.Toast("操作成功");
                this.getlist();
              } else {
                vant.Toast(response.data.msg.info);
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style scoped lang="less">
.index {
  .af {
    position: relative;
    z-index: 2;
    &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 6px;
      background: rgb(232, 237, 252);
      z-index: -1;
    }
  }
}
</style>
